<template>
  <!-- 起吊位 -->
  <g
    class="group"
    @click="handlePointClick(point.orderNo)"
    @mousedown="handleMouseDown"
    @dblclick="handlePointDblClick(point.orderNo, point.orderStatus)"
    @mouseenter="handleMouseEnter"
    @mouseleave="handleMouseLeave"
  >
    <line
      class="line"
      :x1="point.x"
      :y1="point.y"
      :x2="point.labelX + 35"
      :y2="point.labelY + 10"
      :stroke="fillColor"
      :fill="isHovered ? '#2ccaea' : fillColor"
      stroke-width="1"
      v-show="point.isShow_label"
    />
    <g class="label">
      <rect
        :width="140"
        :height="40"
        :x="point.labelX"
        :y="point.labelY"
        :fill="isHovered ? '#2ccaea' : fillColor"
        v-show="point.isShow_label"
      />
      <text
        :x="point.labelX + 70"
        :y="point.labelY + 28"
        stroke="black"
        fill="black"
        text-anchor="middle"
        font-size="28"
        font-family="AlibabaPuHuiTi"
        v-show="point.isShow_label"
        >{{ point.frPos }}
      </text>
    </g>

    <circle :cx="point.x" :cy="point.y" r="7" :fill="isHovered ? '#2ccaea' : fillColor" />
    <circle class="circle" :cx="point.x" :cy="point.y" r="5" :fill="isHovered ? '#2ccaea' : fillColor" />
    <!-- 始终显示的数字 -->
    <text
      :x="point.x + 1"
      :y="point.y + 5"
      stroke="black"
      fill="black"
      text-anchor="middle"
      font-size="18"
      font-family="AlibabaPuHuiTi"
    >
      {{ point.number }}
    </text>
  </g>

  <!-- 卸下位 -->
  <g class="group" v-if="point.orderStatus === '13'" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave">
    <line
      :x1="point.x1"
      :y1="point.y1"
      :x2="point.x1 - 20 + 35"
      :y2="point.y1 - 15 + 10"
      :stroke="isHovered ? '2ccaea' : fillColor"
      stroke-width="1"
      v-show="point.isShow_label"
    />

    <g class="label">
      <rect
        :width="140"
        :height="40"
        :x="point.x1 - 55"
        :y="point.y1 - 28"
        :fill="isHovered ? '2ccaea' : fillColor"
        v-show="point.isShow_label"
        class="blinking-shadow-slow"
      />
      <text
        :x="point.x1 - 20 + 35"
        :y="point.y1 - 15 + 14"
        stroke="black"
        fill="black"
        text-anchor="middle"
        font-size="28"
        v-show="point.isShow_label"
        >{{ point.toPos }}
      </text>
    </g>

    <circle :cx="point.x1" :cy="point.y1" r="5" :fill="isHovered ? '2ccaea' : fillColor" />
  </g>
</template>

<script lang="ts">
import { defineComponent, ref, computed, PropType } from 'vue';
import { useQuasar } from 'quasar';

import { emitter } from 'src/emitter';
import { OrderRow } from '../model';
import { getColor } from '../utils';
import { orderOperate } from '../../api';

export default defineComponent({
  name: 'yard-svg',

  props: {
    point: {
      type: Object as PropType<OrderRow>,
      required: true,
    },

    craneNo: {
      type: String,
      required: true,
    },
  },

  setup(props) {
    const $q = useQuasar();

    const fillColor = computed(() => {
      return getColor(props.point.orderType);
    });
    console.log(props.point);

    const isClick = ref(true);
    const isHovered = ref(false);
    const timer = ref<any>(null); // 用于控制双击不触发单击的定时器
    const longPressTimer = ref<any>(null);

    const handlePointClick = (orderNo: string) => {
      clearTimeout(timer.value);
      clearTimeout(longPressTimer.value);
      if (isClick.value) {
        timer.value = setTimeout(() => {
          emitter.emit('inform', { name: 'terminal-task-detail', value: { orderNo: orderNo, isOpen: true } });
        }, 300);
      } else {
        isClick.value = true;
      }
    };

    const handlePointDblClick = (orderNo: string, orderStatus: string) => {
      clearTimeout(timer.value);
      if (orderStatus !== '11' && orderStatus !== '2') {
        return $q.notify({ message: `当前指令状态${orderStatus},不可选中和取消选中`, timeout: 3000, type: 'negative' });
      }
      // 只有11可以取消
      // 只有2可以选中
      if (orderStatus === '2') {
        $q.dialog({
          title: '确认',
          message: `确定要选中指令${orderNo}吗？`,
          cancel: {
            label: '取消',
            flat: true,
            color: 'white',
          },
          ok: {
            label: '确认',
            flat: true,
            color: 'white',
          },
          persistent: true,
          style: {
            backgroundImage: "url('src/assets/terminal/popup_bg.png')",
            backgroundSize: 'contain',
            backgroundRepeat: 'no-repeat',
            backgroundPosition: 'center',
            backgroundColor: 'transparent',
            color: '#fff',
            padding: '50px',
            fontFamily: 'AlibabaPuHuiTi, sans-serif',
          },
        }).onOk(async () => {
          const params = {
            craneNo: props.craneNo,
            orderNo: orderNo,
            operType: '3',
            currentPos: '',
          };
          orderOperate(params).then(() => {
            $q.notify({ message: '选中操作成功', timeout: 3000 });
          });
        });
      } else {
        $q.dialog({
          title: '确认',
          message: `确定要取消选中指令${orderNo}吗？`,
          cancel: {
            label: '取消',
            flat: true,
            color: 'white',
          },
          ok: {
            label: '确认',
            flat: true,
            color: 'white',
          },
          persistent: true,
          style: {
            backgroundImage: "url('src/assets/terminal/popup_bg.png')",
            backgroundSize: 'contain',
            backgroundRepeat: 'no-repeat',
            backgroundPosition: 'center',
            backgroundColor: 'transparent',
            color: '#fff',
            padding: '50px',
            fontFamily: 'AlibabaPuHuiTi, sans-serif',
          },
        }).onOk(async () => {
          const params = {
            craneNo: props.craneNo,
            orderNo: orderNo,
            operType: '4',
            currentPos: '',
          };
          orderOperate(params).then(() => {
            $q.notify({ message: '取消选中操作成功', timeout: 3000 });
          });
        });
      }
    };

    const handleMouseDown = () => {
      longPressTimer.value = setTimeout(() => {
        isClick.value = false;
        emitter.emit('inform', {
          name: 'terminal-task',
          value: {
            isOpen: true,
            x: props.point.frX,
            y: props.point.frY,
            craneNo: props.craneNo,
            frPos: props.point.frPos,
          },
        });
      }, 1300);
    };

    const handleMouseEnter = () => {
      isHovered.value = true;
    };

    const handleMouseLeave = () => {
      isHovered.value = false;
    };

    return {
      fillColor,
      handlePointClick,
      handlePointDblClick,
      handleMouseDown,
      handleMouseEnter,
      handleMouseLeave,
      isHovered,
    };
  },
});
</script>

<style lang="scss" scoped>
@font-face {
  font-family: 'AlibabaPuHuiTi';
  src: url('@/assets/fonts/AlibabaPuHuiTi-3-55-Regular.ttf') format('truetype');
}

text,
rect {
  cursor: pointer;
  user-select: none;
}

.group {
  z-index: 2;
  circle {
    z-index: 9;
  }
  &:hover {
    z-index: 9;
    .label {
      animation: enlarge 0.3s forwards;
      filter: drop-shadow(0 0 5px #2ccaea);
    }
    circle {
      filter: drop-shadow(0 0 5px #2ccaea);
    }
  }
}

@keyframes blinkingShadow {
  0%,
  100% {
    filter: drop-shadow(0 0 8px transparent);
  }
  50% {
    filter: drop-shadow(0 0 12px #2ccaea); /* 增加模糊半径和颜色对比 */
  }
}

.blinking-shadow {
  animation: blinkingShadow 0.8s infinite; /* 设置动画循环时间 */
}

@keyframes enlarge {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.005);
  }
}

@keyframes blinkingShadowSlow {
  0%,
  100% {
    filter: drop-shadow(0 0 6px transparent);
  }
  50% {
    filter: drop-shadow(0 0 10px #c4c42b); /* 可以根据需要调整颜色和模糊度 */
  }
}

.blinking-shadow-slow {
  animation: blinkingShadowSlow 1.5s infinite; /* 设置较慢的动画循环时间 */
}
</style>
